<template>
    <div class="fa" :style="{backgroundColor:'#F2F3F5'}">
        <div className="content">
            <div className="top">
                <div>
                    综合排序
                    <span></span>
                </div>
                <div>
                    全国
                    <span></span>
                </div>
                <div>
                    筛选
                    <span></span>
                </div>
            </div>
            <div className="subtitle">
                以下是 {{ router.currentRoute.value.query.department }} 医生
            </div>
            <div className="center">
                <div className="doctor_item" v-for="el in getdete.slice(0,6)">
                    <div className="doctor_img">
                       
                        <img  :src="'http://localhost:7001/public/'+el.img" alt="" />
                    </div>
                    <div className="doctor_txt">
                        <div>
                            <h3 style="display:inline"> {{el.title}} </h3>
                            <span className="txt_1st">
                                {{ el.type }}
                            </span>
                            <span className="txt_1st" style="border-radius: 2px;background-color:#ebebeb">
                                {{ el.type1 }}
                            </span>
                        </div>

                        <div style="margin-top:8px;color:#666">
                            <span>
                                {{ el.updata }}
                            </span>
                            <span>
                                {{ el.type2 }}
                            </span>
                        </div>

                        <div style="margin-top:8px;color:#666">
                            <span>
                                {{ el.detail }}
                            </span>
                        </div>

                        <div style="margin-top:10px;">
                            <span>
                                <el-icon :style="{color:'gold',fontSize:'13px'}">
                                    <StarFilled />
                                </el-icon>
                                {{ Math.round(Math.random()*10)/10+4.0 }} &nbsp;
                            </span>
                            <span>
                                {{ Math.round(Math.random()*500+233)}} 个回答
                            </span>
                        </div>

                        <div style="margin-top:10px;">
                            <span class="doctor__remarktags">
                                全国百强医院
                            </span>
                            <span class="doctor__remarktags">
                                医学博士
                            </span>
                            <span class="doctor__remarktags">
                                周好评第一
                            </span>
                            <span class="doctor__remarktags">
                                快速响应
                            </span>
                        </div>

                        <div className="doctor_price">
                            <span style="font-size:16px ;color:#6f7580">
                                咨询费用：￥ 233
                            </span>
                            <span class="ask_btn">
                                问医生
                            </span>
                        </div>
                    </div>
                </div>

                <!-- <div class="get_btn">
                    点击加载更多 图
                </div> -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from "axios";
import { useRouter } from 'vue-router';
let router = useRouter()

let getdete = ref([])
async function search(arg: string) {
    let re: any = await axios("/path/search", { params: { department: arg } })
    getdete.value = re.data.sql
    console.log(getdete.value, typeof (getdete))
}
onMounted(() => {
    // 网络请求
    let x = router.currentRoute.value.query.department
    search(x as string)
})

// console.log('router:', router.currentRoute.value.query)
</script>

<style scoped  lang="scss">
* {
    margin: 0;
    padding: 0;
}

.fa {
    color: black;
    width: 100vm;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.content {
    width: 768px;

    div {
        background-color: white;
    }
}

.top {
    display: flex;
    justify-content: flex-start;

    color: grey;
    font-size: 13px;
    line-height: 15px;

    div {
        width: 256px;
        height: 15px;
        padding: 18px 0;
        text-align: center;
    }
}

.subtitle {
    width: 738px;
    font-weight: 500;
    padding: 20px 15px;
    display: flex;
    justify-content: flex-start;
}

.doctor_item {
    border-bottom: 1px rgba(244, 244, 244, 1.0) solid;
    padding: 14px 30px;
    display: flex;
    justify-content: flex-start;
    font-size: 0.8rem;

    img {
        width: 44px;
        height: 44px;
        border-color: transparent;
        border-radius: 22px;
        background-color: black;
    }

    .doctor_txt {
        width: 650px;
        margin-left: 12px;

        .txt_1st {
            margin-left: 6px;
        }

        .doctor__remarktags {
            padding: 0 6px;
            margin: 10px 6px 0 0;
            line-height: 10px;
            color: #00ad7f;
            border: 1px #00ad7f solid;
            border-radius: 15px;
        }
    }
}

.doctor_price {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;

    .ask_btn {
        padding: 5px 10px;
        border: 1px #00c792 solid;
        border-radius: 4px;
    }
}

.get_btn {
    padding: 14px 30px;
    line-height: 21px;
    text-align: center;
    color: #999;

}
</style>